<!DOCTYPE html>
<html>
<head>
  <script src="../../processing.js"></script>
  <script src="../init.js"></script>
<link rel="stylesheet" href="../style.css"/></head>
<body><h1><a href="http://ejohn.org/blog/processingjs/">Processing.js</a></h1>
<h2>Array2D</h2>

<p>Demonstrates the syntax for creating a two-dimensional (2D) array.
Values in a 2D array are accessed through two index values.  
2D arrays are useful for storing images. In this example, each dot 
is colored in relation to its distance from the center of the image.</p>

<p><a href="http://processing.org/learning/basics/array2d.html"><b>Original Processing.org Example:</b> Array2D</a><br>
<script type="application/processing">
float[][] distances;
float maxDistance;

size(200, 200);
background(0);
maxDistance = dist(width/2, height/2, width, height);
distances = new float[width][height];
for(int i=0; i<height; i++) {
  for(int j=0; j<width; j++) {
    float d = dist(width/2, height/2, j, i);
    distances[j][i] = d/maxDistance * 255; 
  }
}

for(int i=0; i<height; i+=2) {
  for(int j=0; j<width; j+=2) {
    stroke(distances[j][i]);
    point(j, i);
  }
}
</script><canvas width="200" height="200"></canvas></p>
<div style="height:0px;width:0px;overflow:hidden;"></div>

<pre><b>// All Examples Written by <a href="http://reas.com/">Casey Reas</a> and <a href="http://benfry.com/">Ben Fry</a>
// unless otherwise stated.</b>
float[][] distances;
float maxDistance;

size(200, 200);
background(0);
maxDistance = dist(width/2, height/2, width, height);
distances = new float[width][height];
for(int i=0; i&lt;height; i++) {
  for(int j=0; j&lt;width; j++) {
    float d = dist(width/2, height/2, j, i);
    distances[j][i] = d/maxDistance * 255; 
  }
}

for(int i=0; i&lt;height; i+=2) {
  for(int j=0; j&lt;width; j+=2) {
    stroke(distances[j][i]);
    point(j, i);
  }
}</pre>
</body>
</html>
